<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS动画</title>
    <style>
        /*定义关键帧*/
        @keyframes divwidth {
            0%{left: 0px}
            11%{left: 30px}
            22%{left: 60px}
            33%{left: 90px}
            44%{left: 110px}
            55%{left: 130px}
            66%{left: 150px}
            77%{left: 170px}
            88%{left: 190px}
            99%{left: 210px}
            100%{left: 230px}

             }
        div{
            background: red;
            height: 200px;
            width: 200px;
            animation: divwidth 2s linear 0s infinite alternate;
            position: relative ;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>